<template>
  <n-button-group :size="size">
    <n-button
      v-for="option in options"
      :key="option.value"
      :type="option.value === modelValue ? 'primary' : 'default'"
      round
      @click="modelValue = option.value"
    >
      <template #icon v-if="option.icon">
        <component :is="option.icon" />
      </template>
      {{ option.label }}
    </n-button>
  </n-button-group>
</template>

<script lang="ts" setup>
import { useVModel } from "@vueuse/core";

interface Option {
  label: string;
  value: any;
  icon?: Component;
}
interface Props {
  options: Option[];
  value: any;
  size?: "tiny" | "small" | "medium" | "large";
  vertical?: boolean;
}
interface Emits {
  (e: "update:value", value: any): void;
}
const props = withDefaults(defineProps<Props>(), { vertical: false });
const emits = defineEmits<Emits>();
const modelValue = useVModel(props, "value", emits);
</script>
